<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交易明细</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/base.css" />
<link rel="stylesheet" href="{:C('WEB_URL')}Public/business/style/mui.min.css">
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/base.css" />
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/style.css" />
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/business/style/bootstrap.min.css" />
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/business/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/business/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/business/js/script.js"></script>
</head>
<body>

<div id="box">
 <div class="navbar navbar-default navbar-fixed-top">
  <header>
   <h1><a href="index.html"><span class="glyphicon glyphicon-menu-left"></span></a></h1>
   <p class="title">交易明细</p>
  </header>
 </div><!--navbar-fixed-top-->
  <div class="mui-content">
  	<div id="slider" class="mui-slider mui-fullscreen" style="width:100%;max-width:640px;margin:0 auto">
 <!--下拉刷新容器-->
 <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll details">
   <!--数据列表-->
   <ul class="mui-table-view mui-table-view-chevron"  id='ul'>
   <volist name='list' id='vo'>
	<li class="action">
	 <div class="detailsCon">
      <div class="detailsLeft">
<!--    	   <p class="detailsOne"></p> -->
   	   <p>{$vo.time}</p>
   	   <p>NO.{$vo.id}</p>
      </div><!--detailsLeft-->
      <div class="detailsRight">
   	   <h2 class="detailOne">+{$vo.money}</h2>
      </div><!--detailsRight-->
     </div><!--detailsCon-->
     </li>
   </volist>
   </ul>
  </div><!--mui-scroll-->
 </div><!-- pullrefresh-->
 <div class="navbar navbar-default navbar-fixed-bottom">
   <footer id="foot">
    <dl>
     <dt><a href="index.html"><img src="{:C('WEB_URL')}Public/business/images/home.png" /></a></dt>
     <dd><a href="index.html" class="current">首页</a></dd>
    </dl>
    <dl>
     <dt><a href="pullrefresh_sub.html"><img src="{:C('WEB_URL')}Public/business/images/deal_07.jpg" /></a></dt>
     <dd><a href="pullrefresh_sub.html">员工管理</a></dd>
    </dl>
    <dl>
     <dt><a href="manage.html"><img src="{:C('WEB_URL')}Public/business/images/deal_09.jpg" /></a></dt>
     <dd><a href="manage.html">会员管理</a></dd>
    </dl>
   </footer>
  </div><!--/navbar-->
  </div>
  </div>
</div><!--box-->
</body>
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/business/js/mui.min.js"></script>
<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						window.location.reload();
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					var nums=document.getElementById("ul").children.length;
					$.ajax({
						  type:'POST',
						  url:'detail_fresh',
						  dataType: "json",
						  data: 'limit='+nums,
						  success:function(data){
						
							$.each(data, function(index, item){
							var li = document.createElement('li');
						li.className = 'action';
						li.innerHTML = '<div class="detailsCon"><div class="detailsLeft"><p>'+item.time+'</p><p>NO.'+item.id+'</p></div><div class="detailsRight"><h2 class="detailOne">+'+item.money+'</h2></div></div>';
						table.appendChild(li);
                             
                         });
						
						
						  	}
						 })
					
				}, 1500);
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			} 


			//最下面点击效果
$('#foot dl').on("touchstart",function(){
  // alert(1);
  $('#foot dl').css("background-color","#fff")
  $(this).css("background-color","#ddd")
})
$('#foot dl').on("touchend",function(){
  // alert(1);
  $('#foot dl').css("background-color","#fff")

})
		</script>
	</body>

</html>